<template>
  <div class="nav">
    <van-sticky>
      <div class="search-inp">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
          shape="round"
          @focus="Onfocus"
        >
          <template #action>
            <div class="nav-add-img">
              <img src="../assets/images/add.png" alt="" />
            </div>
          </template>
        </van-search>
      </div>

      <div class="nav-box">
        <div class="nav-item-box">
          <van-tabs>
            <van-tab
              v-for="(item, index) in navTitle"
              :key="index"
              @click="getNavContent(item.moduleKey)"
              :title="item.moduleName"
              :to="{ name: item.moduleKey }"
              replace
            >
              <!-- 内容 {{ index }} -->
            </van-tab>
          </van-tabs>
        </div>
        <span class="nav-most">
          <img src="../assets/images/most.png" alt="" />
        </span>
      </div>
    </van-sticky>

    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "NavTop",
  data() {
    return {
      i: 0,
      timer: null,
      uls: null,
      length: 5,
      navTitle: [],
      value: "",
    };
  },
  created() {
    this.$nextTick(() => {
      let uls = this.$refs.uls;
      this.uls = uls;
      // this.timer = setInterval(() => {
      //   this.scrollText();
      // }, 2500);
    });
    this.getNavData();
  },
  methods: {
    scrollText() {
      this.i++;
      this.elementMove(this.uls, "top", -this.i * 33 - 5, 800, () => {
        if (this.i == this.length) {
          this.i = 0;
          this.uls.style.top = "-7px";
        }
      });
    },

    getNavData() {
      this.axios({
        method: "get",

        url: "https://apis.netstart.cn/ximalaya/index/queryIndexTabModule",
      })
        .then((result) => {
          // console.log(result);
          if (result.status === 200) {
            this.navTitle = result.data.data;
            // console.log(this.navTitle);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getNavContent(moduleKey) {
      this.$router.push({ name: "tuijian", params: { moduleKey } });
      // console.log(moduleKey);
      // console.log(1111);
    },
    onSearch(val) {
      this.$router.push({ name });
    },
    onCancel() {
      Toast("取消");
    },
    Onfocus() {
      // console.log(1111);
      this.$router.push({ name: "Search" });
    },
  },
};
</script>

<style lang="less" scoped>

.van-search {
  // background-color: red;
  padding: 0px 12px;
}
.nav-add-img {
  img {
    margin-top: 5px;
  }
}
.search-inp-box {
  display: flex;
  height: 40px;
  align-items: center;
  // position:fixed;
  // top: 0;

  .search-img {
    width: 32px;
    height: 32px;
    display: inline-block;
    background-color: #e8e8e8;
    border-bottom-left-radius: 50%;
    border-top-left-radius: 50%;
  }

  .search-text {
    background-color: #e8e8e8;
    padding: 0 15px;
    height: 32px;
    overflow: hidden;
    width: 265px;
    .inp-box {
      width: 100%;
      height: 100%;
      padding: 0;
      background-color: transparent;
      display: block;
      outline: none;
      border: none;
      color: #444;
    }
  }
  .search-voice-img {
    width: 32px;
    height: 32px;
    display: inline-block;
    background-color: #e8e8e8;
    border-bottom-right-radius: 50%;
    border-top-right-radius: 50%;
    img {
      width: 25px;
      height: 20px;
      padding: 7.5px 0;
    }
  }
}
// }

.nav-add-img {
  width: 45px;
  height: 32px;
  display: inline-block;

  img {
    width: 22px;
    height: 22px;
    padding: 5px 5px;
    float: right;
  }
}

.nav-box {
  background-color: #e8e8e8;
  // position: sticky;
  z-index: 999;
  top: 40px;
  // padding: 0px 5px;
  height: 40px;
  width: 100%;
  line-height: 40px;
  .nav-item-box {
    width: 335px;
    height: 42px;
    display: inline-block;
    // background-color: red;
    overflow: hidden;

    .nav-item {
      flex: 1;
      float: left;
      margin-right: 18px;

      // padding-right: 5px;2
    }
  }
  .nav-most {
    float: right;
    margin-right: 20px;
    height: 40px;
    // background-color: #e8e8e8;

    img {
      width: 20px;
      height: 20px;
      margin-top: 10px;
    }
  }
}
.nav-box[data-v-fae5bece] {
  background-color: white;
}
</style>